<style lang="stylus">
.module-more-list
  min-height 100%
  overflow hidden
  padding-top 198px
  padding-bottom 120px
  .title-bar
    position fixed
    top 0
    width 100%
    z-index 5
    max-width 750px;/*no*/
    margin 0 auto;
  .search-icon
    width 60px
    height 33px
    background url("../assets/search/icon_search.png") no-repeat center
    background-size 32px 100%
</style>

<template lang="pug">
.module-more-list
  title-bar(:title="module.title")
    .search-icon.pdr-40(@click="onLinkPage('search')")
  .flex.flex-wrap
    film-card(v-for="(film, index) in module.data", :key="index", :film="film", :index="index")
  no-more(v-if="loadDone")
</template>

<script>
import TitleBar from '../components/TitleBar.vue'
import FilmCard from '../components/FilmCard.vue'

import NoMore from '../components/NoMore.vue'

export default {
  name: 'module-more-list',
  components: { TitleBar, FilmCard, NoMore },
  data() {
    return {
      module: {
        title: '',
        id: 0,
        data: []
      },
      loadDone: false
    }
  },

  mounted() {
    const { id, title } = this.$route.query

    this.module.id = id
    this.module.title = title

    this.$get('portal/module/movies', { id }).then(module => {
      this.loadDone = true
      this.module = module
    })
  }
}
</script>
